<template>
  <div class="_wz_cent_main _wz_scrap">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="报废车型">
          <i-select v-model="formDataSearch.modelType" filterable placeholder="请选择报废类型" clearable>
            <Option value="1">运输车辆</Option>
            <Option value="2">货运挂车</Option>
          </i-select>
        </FormItem>
        <FormItem label="车牌号">
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请填写车牌号" clearable />
        </FormItem>
        <FormItem label="车主业户" v-if="searchType">
          <i-input v-model="formDataSearch.ownerName" placeholder="请填写车主业户" clearable />
        </FormItem>
        <FormItem label="登记人" v-if="searchType">
          <i-input v-model="formDataSearch.registrantName" placeholder="请填写登记人" clearable />
        </FormItem>

        <FormItem label="运输企业" v-if="searchType">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
        <Button type="success" @click="expireDerive">导出</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Drawer :title="formTitle" v-model="formOperation" width="1000" :draggable="true" :mask-closable="false" :styles="formOperationStyles" :class-name="drawerClass">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">车辆选择</p>
          <Row>
            <i-col span="8">
              <FormItem label="报废车型" prop="scrapModelType">
                <i-select v-model.number="formData.scrapModelType" filterable placeholder="请选择报废车型" :label-in-value="true" clearable @on-change="scrapModelTypeFun">
                  <Option :value="1">运输车辆</Option>
                  <Option :value="2">货运挂车</Option>
                </i-select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="报废车辆" prop="refVehicleTrailerUuid">
                <i-select v-model="formData.refVehicleTrailerUuid" filterable placeholder="请选择报废车辆" :label-in-value="true" clearable @on-change="refVehicleTrailerUuidFun">
                  <Option v-if="formData.scrapModelType == 1" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.carPlateNo}}</Option>
                  <Option v-if="formData.scrapModelType == 2" v-for="item in carList" :value="item.uuid" :key="item.uuid">{{item.trailerPlateNo}}</Option>
                </i-select>
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">报废前数据</p>
          <Form label-position="right" :label-width="80" inline>
            <Row>
              <i-col span="3">
                <div style="margin: auto;width: 100px;">
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%;">
                      <img :src="!!carFormData.scrapVehicleTrailerImg?apiUrl.imgUrl+carFormData.scrapVehicleTrailerImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                  </div>
                  <div style="line-height: 30px;text-align: center;">行驶证照片</div>
                </div>
              </i-col>
              <i-col span="21">
                <i-col span="8">
                  <FormItem label="车主业户">
                    <i-input v-model="carFormData.scrapVehicleTrailerOwnerName" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="车主电话">
                    <i-input v-model="carFormData.scrapVehicleTrailerOwnerPhone" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="车牌号">
                    <i-input v-model="carFormData.scrapVehicleTrailerPlateNo" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="车架号">
                    <i-input v-model="carFormData.scrapVehicleTrailerFrameNo" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="车型">
                    <i-input v-model="carFormData.scrapVehicleTrailerType" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="品牌">
                    <i-input v-model="carFormData.scrapVehicleTrailerBrand" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="排放标准">
                    <i-input v-model="carFormData.scrapVehicleEmissionStandards" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="动力类型">
                    <i-input v-model="carFormData.scrapVehicleFuelType" placeholder="--" disabled />
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="初登日期">
                    <i-input v-model="carFormData.scrapVehicleTrailerIssueDate" placeholder="--" disabled />
                  </FormItem>
                </i-col>
              </i-col>
            </Row>
          </Form>
        </Card>

        <Card :bordered="true" style="margin:0 0 10px;">
          <p slot="title">报废数据 <span style="font-weight: 600;font-size: 12px;color: #f00;margin:0 0 0 20px;">注：报废操作会将原车数据从您的企业内删除，请注意！！！</span>
          </p>
          <Row class="_wz_scrap_formAdd">
            <i-col span="8">
              <FormItem label="报废日期" prop="wzScrapDate">
                <DatePicker type="date" v-model="formData.wzScrapDate" placeholder="请选择报废日期"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="登记人" prop="scrapRegistrantName">
                <i-input v-model="formData.scrapRegistrantName" placeholder="请填写登记人" clearable />
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="报废资料">
                <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" multiple>
                  <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
                </Upload>
                <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
                  <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in defaultList">
                    <div class="demo-upload-list">
                      <img :src="item" @error="public.imgDispose">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
                      </div>
                    </div>
                    <i-input v-model="nameList[index]" placeholder="填写图片名称" clearable />
                  </div>
                </div>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="备注" prop="scrapRemark">
                <i-input v-model="formData.scrapRemark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
              </FormItem>
            </i-col>
          </Row>
        </Card>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
        </div>
      </Form>
    </Drawer>

    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>

    <Drawer title="详情" v-model="formDetails" width="1000" :draggable="true" :mask-closable="false" :styles="{'padding':'10px 10px 10px 10px'}" :class-name="drawerClass">
      <scrapSeeData v-if="formDetails" :selectData="formDetailsData"></scrapSeeData>
    </Drawer>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

  import scrapSeeData from './scrapSeeData.vue'
  import wzTbale from "../../../components/table/table";

  export default {
    components: {
      scrapSeeData,//过户详情
      wzTbale,//列表
    },
    data() {
      return {
        spinShow:false,//本页加载
        searchType:false,//搜索条件
        carFormData: {},
        uploadProgress: 0,//文件上传进度
        subDeptList: [],//运输企业
        formDetailsData: {},//过户详情数据
        formDetails: false,//过户详情
        carList: [],//车和挂车List
        //缩略图
        visible: false,
        imgSrc: "",
        drawerClass: "_wz_drawerClass",
        formDataSearch: {},//搜索表单数据
        formData: {},//新增修改表单数据
        formOperation: false,//表单左侧移出
        formOperationStyles: {//表单左侧移出css
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },

        tableData: {
          url: this.apiUrl.webApi + "/management/scrap/scrapPageList",//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 80, align: 'center', title: '序号'},
            {title: '档案号', minWidth: 190, key: 'scrapRecordNumber'},
            {title: '车牌号', minWidth: 120, key: 'scrapVehicleTrailerPlateNo'},
            {
              title: '报废车型', minWidth: 140, key: 'scrapModelType', render: (h, params) => {
                return h('Tag', {
                  props: {type: 'dot', color: params.row.scrapModelType == 1 ? 'success' : 'primary'}
                }, params.row.scrapModelType == 1 ? '运输车辆' : '货运挂车');
              }
            },
            {title: '车主业户', minWidth: 120, key: 'scrapVehicleTrailerOwnerName'},
            {title: '联系电话', minWidth: 140, key: 'scrapVehicleTrailerOwnerPhone'},
            {title: '报废日期', minWidth: 120, key: 'scrapDate'},
            {title: '登记人', minWidth: 120, key: 'scrapRegistrantName'},
            {title: '运输企业', minWidth: 260, key: 'deptName'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                let operationButtons = [];
                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, "查看"))



                //删除
                if (true) {
                  operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                  operationButtons.push(h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    on: {
                      click: () => {
                        let that = this;
                        that.$Modal.confirm({
                          title: '删除提醒',
                          content: '确定要删除选中的记录？',
                          onOk: () => {
                            that.spinShow = true;
                            that.axios.post(that.apiUrl.webApi + "/management/scrap/scrapDelete", {uuid: params.row.uuid}).then(res => {
                              that.spinShow = false;
                              if (!!res) {
                                that.$Message.success('删除成功');
                                that.$refs.wzTbale.tableLoadData();
                              }
                            }).catch(err => {
                              console.log("失败", err)
                            })
                          },
                          onCancel: () => {
                            //点击取消
                          }
                        });
                      }
                    }
                  }, "删除"))

                }

                return operationButtons;


              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },

        //验证
        ruleValidate: {
          scrapModelType: [
            {type: 'number',required: true, message: '请选择报废车型', trigger: 'blur'},
          ],
          refVehicleTrailerUuid: [
            {required: true, message: '请选择报废车辆', trigger: 'blur'},
          ],
          wzScrapDate: [
            {type: "date", required: true, message: "请选择报废日期", trigger: "blur"}
          ],
          scrapRegistrantName: [
            {required: true, message: '请填写登记人', trigger: 'blur'},
          ]
        },
        formTitle: "",//表单名称

        defaultList: [],//图片展示数据
        defaultListData: [],//图片表单数据
        nameList: [],//图片名称
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;


      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法
      addTableData() {//table添加
        let that = this;
        that.formTitle = "添加";
        that.defaultList = [];//图片展示数据
        that.defaultListData = [];//图片表单数据
        that.nameList = [];//图片名称
        that.formData = {
          wzScrapDate: new Date(),
          scrapRegistrantName:JSON.parse(sessionStorage.getItem('loginData')).user.name,
        };
        that.formOperation = true;
      },
      searchSubmit() {//搜索
        this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
        this.$refs.wzTbale.tableLoadData(true);
      },
      addSubmit(name) {//新增修改提交
        let that = this;
        that.$refs[name].validate((valid) => {
          if (valid) {//正则判断使用
            //提醒
            that.$Modal.confirm({
              title: '报废提醒',
              content: '请确认您所报废的车辆，一经提交，不可删除修改，请确认信息后再次提交',
              onOk: () => {
                let data = that.formData;
                //报废日期
                data.scrapDate = that.public.timeFormatting(data.wzScrapDate, "yyyy-MM-dd");
                let formData = new FormData();

                //报废资料
                that.defaultListData.forEach(function (k, i) {
                  let type = k.name.substr((k.name.lastIndexOf(".") + 1));
                  formData.append('imgList', k, (that.nameList[i].length > 0 ? that.nameList[i] : '图片描述') + '.' + type);
                })


                for (let key in data) {
                  if (!!data[key]) {
                    formData.append(key, data[key]);
                  }
                }

                that.axios.post(that.apiUrl.webApi + "/management/scrap/scrapSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
                  that.$Spin.hide();
                  if (!!res) {
                    that.$Message.success("车辆报废成功");
                    that.$refs.wzTbale.tableLoadData();
                    that.formOperation = false;
                  }
                }).catch(err => {
                  console.log("失败", err)
                })
              },
              onCancel: () => {
                //点击取消
              }
            });
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //缩略图查看
      handleView(src) {
        this.imgSrc = src;
        this.visible = true;
      },
      //新增的时候 处理图片数据
      handleBeforeUpload(file) {
        //如果是文件  就展示文件名
        let type = file.type.split("/")[0];
        if (type == "image") {//图片
          this.defaultList.push(window.URL.createObjectURL(file));
          this.defaultListData.push(file);
          this.nameList.push("图片描述");
        } else {
          this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
        }
        return false;
      },

      //报废资料删除
      handleRemove(file, index) {//新添加的图片删除
        this.defaultList.splice(index, 1);
        this.defaultListData.splice(index, 1);
        this.nameList.splice(index, 1);
      },
      //报废车型 查询对应的车 还是挂车list
      scrapModelTypeFun(e) {
        let that = this;
        if (!!e) {
          if (e.value == 1) {//车辆
            that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList", {}).then(res => {
              that.tableLoading = false;
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {//挂车
            that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerList", {}).then(res => {
              that.tableLoading = false;
              if (!!res) {
                that.carList = res.data.data;
              }
            }).catch(err => {
              console.log('失败', err);
            })
          }

        } else {//清空数据
          //清空 报废车牌
          that.carList = [];
          //清空 车数据
        }
      },
      //车 挂车 详情
      refVehicleTrailerUuidFun(data) {
        let that = this;
        //清空数据
        that.$set(that.carFormData, 'scrapVehicleTrailerImg', '')//车辆照片
        that.$set(that.carFormData, 'scrapVehicleTrailerOwnerName', '')//车主业户
        that.$set(that.carFormData, 'scrapVehicleTrailerOwnerPhone', '')//车主电话
        that.$set(that.carFormData, 'scrapVehicleTrailerPlateNo', '')//车牌号
        that.$set(that.carFormData, 'scrapVehicleTrailerFrameNo', '')//车架号
        that.$set(that.carFormData, 'scrapVehicleTrailerType', '')//车型
        that.$set(that.carFormData, 'scrapVehicleTrailerBrand', '')//品牌
        that.$set(that.carFormData, 'scrapVehicleEmissionStandards', '')//排放标准
        that.$set(that.carFormData, 'scrapVehicleFuelType', '')//动力类型
        that.$set(that.carFormData, 'scrapVehicleTrailerIssueDate', '')//初登日期

        if (!!data && !!data.value) {
          if (that.formData.scrapModelType == 1) {//车辆
            //车辆修改详情
            that.axios.post(that.apiUrl.coreVehicleCoreVehicleInfo, {uuid: data.value}).then(res => {
              if (!!res) {
                that.carFormData.scrapVehicleTrailerImg = res.data.data.vehicleLicenseImg;//行驶证照片
                that.carFormData.scrapVehicleTrailerOwnerName = res.data.data.vehicleOwnerName;//车主业户
                that.carFormData.scrapVehicleTrailerOwnerPhone = res.data.data.vehicleOwnerPhone;//车主电话
                that.carFormData.scrapVehicleTrailerPlateNo = res.data.data.carPlateNo;//车牌号
                that.carFormData.scrapVehicleTrailerFrameNo = res.data.data.frameNo;//车架号
                that.carFormData.scrapVehicleTrailerType = res.data.data.vehicleModel;//车型
                that.carFormData.scrapVehicleTrailerBrand = res.data.data.vehicleBrand;//品牌
                that.carFormData.scrapVehicleEmissionStandards = res.data.data.vehicleEmissionStandards;//排放标准
                that.carFormData.scrapVehicleFuelType = res.data.data.fuelType;//动力类型
                that.carFormData.scrapVehicleTrailerIssueDate = res.data.data.vehicleDrivingPermitRegisterDate;//初登日期
              }
            }).catch(err => {
              console.log("失败", err)
            })
          } else if (that.formData.scrapModelType == 2) {//挂车
            //挂车修改详情
            that.spinShow = true;
            that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerInfo", {uuid: data.value}).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.carFormData.scrapVehicleTrailerImg = res.data.data.trailerLicenseImg;//行驶证照片
                that.carFormData.scrapVehicleTrailerOwnerName = res.data.data.trailerOwnerName;//车主业户
                that.carFormData.scrapVehicleTrailerOwnerPhone = res.data.data.trailerOwnerPhone;//车主电话
                that.carFormData.scrapVehicleTrailerPlateNo = res.data.data.trailerPlateNo;//车牌号
                that.carFormData.scrapVehicleTrailerFrameNo = res.data.data.trailerFrameNo;//车架号
                that.carFormData.scrapVehicleTrailerType = res.data.data.trailerModel;//车型
                that.carFormData.scrapVehicleTrailerBrand = res.data.data.trailerBrand;//品牌
                that.carFormData.scrapVehicleEmissionStandards = '--';//排放标准
                that.carFormData.scrapVehicleFuelType = '--';//动力类型
                that.carFormData.scrapVehicleTrailerIssueDate = res.data.data.trailerDrivingPermitIssueDate;//初登日期
              }
            }).catch(err => {
              console.log("失败", err)
            })
          }
        }
      },
      //导出
      expireDerive() {
        let that = this;
        let formDataSearch = JSON.parse(JSON.stringify(this.formDataSearch));
        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/management/scrap/scrapExport", formDataSearch).then(res => {
          that.spinShow = false;
          if (!!res) {
            window.open(that.apiUrl.imgUrl + res.data.data)
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },

    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_scrap {
    display: flex;
    flex-direction: column;


  }

  ._wz_drawerClass {
    .demo-upload-list {
      margin: auto;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          margin: auto;
          color: #fff;
          font-size: 40px;
          cursor: pointer;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: flex;
    }

    ._wz_scrap_formAdd {
      .demo-upload-list {
        display: inline-block;
        width: 200px;
        height: 140px;
        text-align: center;
        line-height: 140px;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        border: 1px solid rgba(0, 0, 0, .2);
        margin-right: 4px;

        img {
          width: 100%;
          height: 100%;
        }

        .demo-upload-list-cover {
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, .6);

          i {
            color: #fff;
            font-size: 40px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
      }

      .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
      }
    }
  }
</style>
